<template>
    <el-button v-if="propJson.isAddData" class="addClass" type="primary" @click="add()">
        <component is="PlusOutlined" style="padding-right: 10px"/>
        添 加
    </el-button><el-button v-if="propJson.isSonTable && propJson.isAddSonTable" class="addClass" type="primary" @click="addSonTable()">
        <component is="PlusOutlined" style="padding-right: 10px"/>
        添 加 子 表 格
    </el-button>
    <el-table :data="tableData"
              :border="propJson.isBorder"
              :stripe="propJson.isStripe"
              :show-overflow-tooltip="propJson.isOverFlowTip"
              :max-height="propJson.isMaxHeight ? propJson.maxHeight : -1"
              :style="propJson.editFlag ? 'width: 98%; margin-left: 1%;' : ''"
              @selection-change="tableSelect"
              :span-method="sonTableSpanMethod">
        <el-table-column prop="ywuEditorInnerId" label="序号" :width="70" align="center"></el-table-column>
        <el-table-column v-for="(item, index) in propJson.tableFieldList"
                         :prop="item.variableField"
                         :label="item.variableLabel"
                         :align="item.isAlignCenter">
            <template #default="scope">
                <span v-if="!scope.row[propJson.sonTableTypeName] && item.isEditor">
                    <el-input v-model="scope.row[item.variableField]" :disabled="item.isDisable" v-if="item.isEditor && item.editorType === 'input'" @change="inputChange(scope.row)"/>
                    <el-switch v-model="scope.row[item.variableField]" :disabled="item.isDisable" v-if="item.isEditor && item.editorType === 'switch'" @change="inputChange(scope.row)"/>
                    <el-select v-model="scope.row[item.variableField]" :disabled="item.isDisable" v-if="item.isEditor && item.editorType === 'dropDown'" @click="selectClick(index)" @change="inputChange(scope.row)">
                        <el-option v-for="item in item.selectOptions" :key="item.value" :label="item.label" :value="item.value"/>
                    </el-select>
                </span>
                <span v-if="scope.row[propJson.sonTableTypeName] && scope.cellIndex === 1">
                    <EditTableCommon :prop-json="propJson" :common-param="commonParam" :table-data="scope.row[propJson.sonTableName]"/>
                </span>
            </template>
        </el-table-column>

        <el-table-column align="center" :width="80" v-if="propJson.isDeleteData">
            <template #header>
                <span>操 作</span>
            </template>
            <template #default="scope">
                <el-button type="default" size="small" @click="deleteData(scope.row)">
                    <component is="DeleteTwoTone"/>
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
import {commonParamChange} from "@/utils/commonParamUtil";
import jsonpath from "jsonpath";
import {doThirdServiceValue} from "@/request/lowcode/thirdService";

export default {
    name: "EditTableCommon",
    props: ['propJson', 'commonParam', 'tableData'],
    methods: {
        add() {
            // 构建待插入的对象
            let info = {}
            for (let index = 0; index < this.propJson.tableFieldList.length; index++) {
                let fieldName = this.propJson.tableFieldList[index].variableField
                if (this.propJson.tableFieldList[index].editorType === "switch") {
                    info[fieldName] = false
                } else {
                    info[fieldName] = ""
                }
            }
            this.tableData.push(info);
            // 为每一行数据添加一个序号
            for (let index = 0; index < this.tableData.length; index++) {
                let info = this.tableData[index]
                info["ywuEditorInnerId"] = index + 1;
            }
        },
        inputChange(row) {
            // 根据序号修改数据
            let paramInfo = this.tableData
            for (let index = 0; index < paramInfo.length; index++) {
                let info = paramInfo[index]
                if (info["ywuEditorInnerId"] === row["ywuEditorInnerId"]) {
                    paramInfo[index] = row
                    break
                }
            }
        },
        deleteData(row) {
            // 根据序号删除数据
            let deleteIndex = -1
            let paramInfo = this.tableData
            for (let index = 0; index < paramInfo.length; index++) {
                let info = paramInfo[index]
                if (info["ywuEditorInnerId"] === row["ywuEditorInnerId"]) {
                    deleteIndex = index
                    break
                }
            }
            paramInfo.splice(deleteIndex, 1);
        },
        tableSelect(val) {
            // 获取变量名称
            let paramName = this.propJson.selectVarParamName
            commonParamChange(this.commonParam, paramName, val)
        },
        selectOptionsThen(resValue, execParam) {
            // 根据返回的结果解析label和value
            let optionsList = []
            for (let i = 0; i < resValue.length; i++) {
                let op = {label: "", value: ""}
                let info = resValue[i]
                let opLabel = jsonpath.query(info, execParam.optionLabel)
                let opValue = jsonpath.query(info, execParam.optionValue)
                if (opLabel.length > 0 && opValue.length > 0) {
                    op.label = opLabel[0]
                    op.value = opValue[0]
                    optionsList.push(op)
                }
            }
            execParam.selectOptions = optionsList
        },
        async getSelectOptions() {
            for (let index = 0; index < this.propJson.tableFieldList.length; index++) {
                let fieldInfo = this.propJson.tableFieldList[index]
                if (fieldInfo.isOptionClickAction) {
                    continue;
                }
                if (fieldInfo.isEditor && fieldInfo.editorType === 'dropDown') {
                    if (this.propJson.editFlag) {
                        return;
                    }
                    await doThirdServiceValue(fieldInfo.actionInfo, this.commonParam, this.selectOptionsThen, () => {}, fieldInfo)
                }
            }
        },
        addSonTable() {
            // 构建待插入的对象
            let info = {}
            info[this.propJson.sonTableName] = [];
            info[this.propJson.sonTableTypeName] = true;
            this.tableData.push(info);
            // 为每一行数据添加一个序号
            for (let index = 0; index < this.tableData.length; index++) {
                let info = this.tableData[index]
                info["ywuEditorInnerId"] = index + 1;
            }
        },
        sonTableSpanMethod(info) {
            if (info.row[this.propJson.sonTableTypeName] && info.columnIndex === 1) {
                return [1, this.propJson.tableFieldList.length];
            } else if (info.row[this.propJson.sonTableTypeName] && (info.columnIndex > 1 && info.columnIndex <= this.propJson.tableFieldList.length)) {
                return [0, 0];
            } else {
                return [1, 1];
            }
        },
        async selectClick(index) {
            if (this.propJson.editFlag) {
                return;
            }
            let fieldInfo = this.propJson.tableFieldList[index]
            if (!fieldInfo.isOptionClickAction) {
                return;
            }
            await doThirdServiceValue(fieldInfo.actionInfo, this.commonParam, this.selectOptionsThen, () => {}, fieldInfo)
        }
    },
    created() {
        // 初始化时变量所有字段，如果为下拉选项字段则加载下拉选项值
        this.getSelectOptions();
        if (this.tableData) {
            for (let index = 0; index < this.tableData.length; index++) {
                let info = this.tableData[index]
                info["ywuEditorInnerId"] = index + 1;
            }
        }
    }
}
</script>

<style scoped lang="less">
.addClass {
    margin-bottom: 20px;
    margin-top: 10px;
    margin-right: 20px;
    float: right;
    width: 10%;
}
</style>